<template>
	<view class="content">
		<!-- 头部 -->
		<view class="cd-header-content">
			<view class="cd-header-item">
				<view class="cd-header-item-img"><image src="../../勾选_填充-copy.png" mode="widthFix"></image></view>
				<view class="cd-header-item-txt">30天无忧退货</view>
			</view>
			<view class="cd-header-item">
				<view class="cd-header-item-img"><image src="../../勾选_填充-copy.png" mode="widthFix"></image></view>
				<view class="cd-header-item-txt">48小时快速退费</view>
			</view>
			<view class="cd-header-item">
				<view class="cd-header-item-img"><image src="../../勾选_填充-copy.png" mode="widthFix"></image></view>
				<view class="cd-header-item-txt">满88元免邮费</view>
			</view>
		</view>

		<!-- 购物车选项 -->
		<view class="cd-buycart-content">
			<view class="cd-butcart" v-for="(item, index) in cartList" :key="item.goods_id">
				<view class="cd-check-content">
					<u-checkbox-group placement="column" shape="circle" @change="checkedFn(item)">
						<u-checkbox :customStyle="{ marginBottom: '8px' }" :checked="item.checked == 1"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="cd-swipe-content">
					<u-swipe-action>
						<u-swipe-action-item :options="options1" @tap="del(item.product_id, index)">
							<view class="swipe-action u-border-top u-border-bottom">
								<view class="swipe-action__content">
									<view class="swipe-action-img"><image :src="item.list_pic_url" mode="widthFix"></image></view>
									<view class="swipe-action-txt">
										<text class="swipe-action__content__text">{{ item.goods_name }}</text>
										<view class="swipe-action__content__text-right">
											<text class="swipe-action__content__money">¥ {{ item.retail_price }}</text>
											<text class="swipe-action__content__text-right-txt">x{{ item.number }}</text>
										</view>
										<!-- 步进器 -->
										<view class="swipe-action-rum">
											<u-number-box v-model="item.number" v-if="btnshow">
												<view slot="minus" class="minus" @tap="reduce(index, item.product_id)"><u-icon name="minus" size="12"></u-icon></view>
												<text slot="input" style="width: 50px;text-align: center;" class="input">{{ item.number }}</text>
												<view slot="plus" class="plus" @tap="add(index, item.product_id)"><u-icon name="plus" color="#ccc" size="12"></u-icon></view>
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</view>
		</view>
		<!-- 编辑 -->
		<view class="button-box">
			<view class="cd-edit-content">
				<view class="cd-edit-txt">
					累计共{{ checklist.length }}件商品，可点击
					<u-button type="success" text="编辑" size="small" class="cd-edit-btn" v-if="showbtn" @tap="changbtn"></u-button>
					<u-button type="error" text="完成编辑" v-else @tap="changeback" class="cd-edit-btns"></u-button>
					按钮进行商品数量修改
				</view>
			</view>
			<!-- 全选合计 -->
			<view class="cd-PurchaseBtn-content">
				<view class="cd-PurchaseBtns-left">
					<u-checkbox-group shape="circle">
						<u-checkbox :customStyle="{ marginBottom: '8px' }" :label="name" :checked="checkAlls" @change="checkAllFn"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="cd-PurchaseBtn-center">
					<text class="cd-center-txt-one">合计：</text>
					<text class="cd-center-txt-two">{{ cartTotal.checkedGoodsAmount }}</text>
				</view>
				<view class="cd-PurchaseBtn-right"><button class="btn">立刻购买</button></view>
			</view>
		</view>

		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { ApiCart, Apichecked, Apidel, Apiupdate } from '@/utils/api.js';
import { isLogin } from '@/utils/units.js';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			radiolist1: [
				{
					disabled: false
				}
			],
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#ee0a24',
						borderColor: '#fafafa'
					}
				}
			],
			name: '全选',
			value: 1,
			// 编辑按钮
			showbtn: true,
			// 购物车
			cartList: [],
			// 购物车选中转态
			checked: 0,
			// 购物车数据
			cartTotal: [],
			// 按钮数组
			checklist: [],
			// 步进器
			btnshow: false,
			// 控制按钮锁定
			suocheck: false,
			productIds: [],

			isCheckeds: 0,
			checkAlls: false
		};
	},
	components: {
		customTabBar
	},
	async onShow() {
		this.$store.commit('changeTabbarIndex', 3);
		if (!isLogin()) {
			let pages = getCurrentPages();
			this.setLastVisitUrl('/' + pages[0].route);
			uni.switchTab({
				url: '/pages/user/user'
			});
			return;
		}
		let res = await ApiCart();
		if (res.errno !== 0) return;
		console.log(res);
		let { cartList, cartTotal } = res.data;
		this.checkAll = cartList.every(item => item.checked == 1);
		this.cartTotal = cartTotal; //购物车数据

		this.cartList = cartList;

		console.log(this.checklist);
	},
	methods: {
		...mapMutations(['setLastVisitUrl']),
		// 全选
		async checkAllFn(e) {
			let res;
			let producetId = this.cartList.map(item => item.product_id);
			// 取消全选
			if (this.checkAlls) {
				res = await Apichecked({
					isChecked: 0,
					productIds: producetId.join(',')
				});
			} else {
				res = await Apichecked({
					isChecked: 1,
					productIds: producetId.join(',')
				});
			}
			if (res.errno !== 0) return;
			let { cartList, cartTotal } = res.data;
			this.checkAlls = cartList.every(item => item.checked === 1);
			this.cartTotal = cartTotal; //购物车数据
			this.cartList = cartList;
		},
		// 反选
		async checkedFn(item) {
			let res = await Apichecked({
				isChecked: item.checked === 1 ? 0 : 1,
				productIds: item.product_id + ''
			});
			if (res.errno !== 0) return;
			let { cartList, cartTotal } = res.data;
			this.checkAlls = cartList.every(item => item.checked === 1);
			this.cartTotal = cartTotal; //购物车数据
			this.cartList = cartList;
		},

		// 步进器 减
		async reduce(i, id) {
			let res = await Apiupdate({
				goodsId: this.cartList[i].goods_id,
				id: this.cartList[i].id,
				number: this.cartList[i].number - 1,
				productId: id
			});
			if (res.errno !== 0) return;
			let { cartList, cartTotal } = res.data;
			this.checkAll = cartList.every(item => item.checked == 1);
			this.cartTotal = cartTotal; //购物车数据
			this.cartList = cartList;
		},
		// 加
		async add(i, id) {
			let res = await Apiupdate({
				goodsId: this.cartList[i].goods_id,
				id: this.cartList[i].id,
				number: this.cartList[i].number + 1,
				productId: id
			});
			if (res.errno !== 0) return;
			let { cartList, cartTotal } = res.data;
			this.checkAll = cartList.every(item => item.checked == 1);
			this.cartTotal = cartTotal; //购物车数据
			this.cartList = cartList;
		},

		// 编辑按钮
		changbtn() {
			this.showbtn = false;
			this.btnshow = true;
			// 改变按钮状态
			this.suocheck = true;
		},
		changeback() {
			this.showbtn = true;
			this.btnshow = false;
			// 改变按钮状态
			this.suocheck = false;
		},

		// 点击删除
		async del(id, index) {
			let productId = String(id);
			// console.log(typeof productId);
			let res = await Apidel(productId);
			console.log(res);
			this.cartList.splice(index, 1);
			let { cartList, cartTotal } = res.data;
			this.checkAlls = cartList.every(item => item.checked === 1);
			this.cartTotal = cartTotal; //购物车数据
			this.cartList = cartList;
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	// 头部
	.cd-header-content {
		height: 60rpx;
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		background-color: #efefef;
		.cd-header-item {
			display: flex;
			justify-content: center;
			align-items: center;

			.cd-header-item-img {
				width: 36rpx;
				height: 36rpx;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.cd-header-item-txt {
				font-size: 26rpx;
			}
		}
	}
	// 购物车选项
	.cd-buycart-content {
		.cd-butcart {
			border-bottom: 2rpx solid #ccc;
			display: flex;
			height: 250rpx;
			height: 100%;
			overflow: hidden;
			width: 750rpx;
			padding: 30rpx 0;
			box-sizing: border-box;
			// 按钮
			.cd-check-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-left: 20rpx;
			}

			.cd-swipe-content {
				overflow: hidden;
				z-index: 1;

				.swipe-action {
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					background-color: #fafafa;
					border: none;
					.u-swipe-action-item {
						overflow: hidden;
						.u-swipe-action-item__right {
							border: none;
							.u-swipe-action-item__right__button {
							}
						}
					}
					.swipe-action__content {
						overflow: hidden;
						display: flex;
						width: 640rpx;
						.swipe-action-img {
							width: 175rpx;
							height: 175rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
						.swipe-action-txt {
							width: 460rpx;
							height: 180rpx;
							.swipe-action__content__text {
								height: 60rpx;
								display: block;
								font-size: 34rpx;
							}
							.swipe-action__content__text-right {
								display: flex;
								justify-content: space-between;

								.swipe-action__content__money {
									height: 60rpx;
									display: block;
									margin-top: 30rpx;
								}
								.swipe-action__content__text-right-txt {
									display: flex;
									align-items: center;
									justify-content: center;
									text-align: right;
									font-size: 20rpx;
									color: #969799;
								}
							}
							.swipe-action-rum {
								// height: 50rpx;
								display: flex;
								flex-direction: row-reverse;
							}
						}
					}
				}
			}
		}
	}
	.button-box {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		z-index: 100;
		// 编辑
		.cd-edit-content {
			background-color: #fff7cc;
			width: 750rpx;
			height: 96rpx;

			.cd-edit-txt {
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 16rpx 70rpx 0 24rpx;
				color: #f56723;
				font-size: 12px;
				line-height: 1.5;
				height: 96rpx;
				.cd-edit-btn {
					width: 100rpx;
					background-color: #07c160;
				}
				.cd-edit-btns {
					width: 160rpx;
					background-color: #ee0a24;
				}
			}
		}
		.cd-PurchaseBtn-content {
			width: 750rpx;
			box-sizing: border-box;
			// position: fixed;
			// left: 0;
			// bottom: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			line-height: 100rpx;
			height: 100rpx;
			padding: 0 20rpx;
			z-index: 100;
			background-color: #fff;
			.cd-PurchaseBtns-left {
				.u-checkbox-label--left {
					margin: 0 !important;
				}
				line-height: 120rpx;
			}
			.cd-PurchaseBtn-center {
				width: 330rpx;
				text-align: right;

				.cd-center-txt-one {
					font-size: 28rpx;
				}
				.cd-center-txt-two {
					color: #ee0a24;
					font-weight: 500;
				}
			}
			.cd-PurchaseBtn-right {
				width: 110px;
				height: 40px;
				.btn {
					background: linear-gradient(to right, #ff6034, #ee0a24);
					border-radius: 50rpx;
					font-weight: 500;
					border: none;
					color: #fff;
					font-size: 30rpx;
				}
			}
		}
	}
}
</style>
